<template>
  <view>
    <hx-navbar ref="hxnb" :config="config">
      <block slot="left">
        <view class="a1">
          <text class="a2">首页</text>
        </view>
      </block>
    </hx-navbar>

    <view class="b1">
      <view class="b2" style="background-color: #fff;padding: 20rpx;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */">
        <image src="../../static/xiaohui.png" class="b3"></image>
        <view style="font-weight: 800">桂林电子科技大学</view>
      </view>
    </view>

    <view class="b1">
      <view class="b2">
        <image src="../../static/ic_logo.jpg" class="b3"></image>
        <view class="name-and-id">
          <view style="font-size: 16px;">毛健儒</view>
          <view style="font-size: 16px;color: #606266;">工号：2100301124</view>
        </view>
      </view>
    </view>

    <view class="parent-container">
      <view class="container">
        <view class="right">
          <view class="info-container" style="color: #3C389A;background-color: rgba(60,56,154,0.44)">
            <view class="content" @click="goToUserManage()">用户管理<button class="right1-enter-button" style="background-color: #3C389A;">></button></view>
          </view>
          <view class="info-container" style="color: #BFD641;background-color: rgba(191,214,65,0.38)">
            <view class="content" @click="gotoRepairAccept()" >报修受理<button class="right1-enter-button" style="background-color: #BFD641;">></button></view>
          </view>
        </view>
        <view class="right">
          <view class="info-container">
            <view class="content" @click="gotoCourseManage()" >课程管理<button class="right1-enter-button" style="background-color: #ef955d;">></button></view>
          </view>
          <view class="card-container">
            <view class="content" @click="gotoResourceManage()" >资源审核<button class="right2-enter-button" style="background-color: #0cede2;">></button></view>
          </view>
        </view>
      </view>
    </view>

        <view class="a5">
          <view class="a6" v-for="(item,index) in navarr" :key="index" @click="navClick(item.page)">
            <image :src="item.icon" class="a7"></image>
            <text style="font-size: 13px;font-weight: bold;color: #000305">{{item.title}}</text>
          </view>
        </view>


    <view class="news">校内新闻</view>
    <scroll-view :scroll-y="true" class="c6">
      <view class="c7" v-for="(item, index) in noticeArr" :key="index">
        <view @click="intoNewDetail(item.id)" class="c8">
          <view class="c9">{{ item.title }}</view>
          <view class="d1">
            <view style="display: inline-block;width: 76%;"> {{ item.category }} </view>
            <text>{{item.publishDate.slice(0,10)}}</text>
          </view>
        </view>
        <image src="@/static/newList_icon.png" class="d2"></image>
      </view>
    </scroll-view>
    <view class="resources">教学资源</view>
    <scroll-view :scroll-y="true" class="c6">
        <view class="c7" v-for="(item,index) in resourceList" :key="index">
          <view @click="intoResourceDetail(item.id)" class="c8">
            <view class="c9">{{item.title}}</view>
            <view class="d1">{{item.teacherName}}</view>
          </view>
          <image :src="item.icon" class="d2"></image>
        </view>
    </scroll-view>
  </view>
</template>

<script>
import student from '@/api/student/index.js'
import teacher from "../../api/teacher";
export default {
  data() {
    return {
      config: {
        back: false,
        fixed: true,
        leftSlot: true,
        search: {
          placeholder: ''
        }
      },
      navarr: [{
      		title: '发布新闻',
      		icon: '/static/new_icon.png',
      		page:'/pages/new/addNew'
      	}],
      tab: 0,
      noticeArr: [],
      resourceList: [],
      cardAddr: [
        {
          title: '校园卡',
          page: '/pages/card/card'
        }
      ]
    }
  },
  async onLoad() {
    await this.getNewsList()
    await this.getAllList()
  },
  methods: {
    //获取所有资源列表
    async getAllList() {
      try {
        const res = await teacher.getAllResourceList();
        this.resourceList = res.data.filter(item => item.auditStatus === 1)
        console.log(this.noticeArr)
      } catch (e) {
        return await Promise.reject(e)
      }
    },
    intoResourceDetail(id) {
      console.log(id)
      uni.navigateTo({
        url: `/pages/resource/resourceDetail?id=${id}`, // 跳转的目标页面路径
      });
    },
    async intoNewDetail(id) {
      uni.navigateTo({
        url: `/pages/new/newDetail?id=${id}`, // 跳转的目标页面路径
      });
    },
    async getNewsList () {
      try {
        const res = await student.getNewsList()
        this.noticeArr = res.data
      } catch (e) {
        console.log(e)
      }
    },
    goToUserManage() {
      uni.navigateTo({
        url: '/pages/userManage/userManage',
      });
    },
    gotoCourseManage() {
      uni.navigateTo({
        url: '/pages/courseManage/currentCourse',
      });
    },
    gotoResourceManage() {
      uni.navigateTo({
        url: '/pages/resource/auditResource',
      });
    },
    gotoRepairAccept() {
      uni.navigateTo({
        url: '/pages/repair/repairAccept',
      });
    },
    tabChange({
                index,
                item
              }) {
      this.tab = index;
    },
    navClick(page){
      uni.navigateTo({
        url:page
      })
    },
    navCard() {
      uni.switchTab({
        url: '/pages/card/card'
      });
      console.log("==========================")
    }
  }
}
</script>

<style>
page {
  background: linear-gradient(to bottom, #E4DDF5 0%, #FFFFFF 20%); /* 从淡蓝色到白色的渐变 */

}

.a1 {
  padding-left: 35upx;
}

.a2 {
  font-size: 18px;
  font-weight: 700;
}



.a5 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  font-size: 22upx;

  color: #666666;
  padding-top: 30upx;
}

.a6 {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.a7 {
  height: 70upx;
  width: 70upx;
  margin-bottom: 15upx;
}


.b1 {
  padding: 30upx 30upx 0 30upx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.b2 {
  width: 97%;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 600;
  font-size: 28rpx;
  color: #000305;
  background-color: rgba(255, 255, 255, 0);
}

.b3 {
  border-radius: 50%;
  height: 80rpx;
  width: 80rpx;
  margin-right: 20upx;
}

.name-and-id {
  display: flex;
  flex-direction: column; /* 设置为垂直排列 */
  align-items: flex-start; /* 文本左对齐 */
  margin-left: 10upx; /* 为文本和图片之间添加一些间距 */
}

.name-and-id view {
  margin-bottom: 10upx; /* 为姓名和学号之间添加一些间距 */
}

.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 90%;
  height: 260upx;
  display: flex;
  flex-direction: row;
  padding: 20upx;

}

.right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 使子元素在垂直方向上均匀分布 */
  height: 100%; /* 使右容器的高度与父容器相同 */
  padding-left: 10upx;
}

.info-container, .card-container {
  flex: 1; /* 使每个子容器占据相等的高度 */
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-start; /* 水平对齐到左侧 */
  width: 90%;
  padding: 10upx;
  border-radius: 10upx;
  margin-bottom: 10upx; /* 为两个 view 之间添加间距 */
}

.info-container {
  background-color: #f1d1bd; /* 个人信息的背景色 */
  color: #ef955d;
  font-weight: bold;
}

.card-container {
  background-color: #bce8e6; /* 校园卡的背景色 */
  color: #0cede2;
  font-weight: bold;
}

.info-container:last-child, .card-container:last-child {
  margin-bottom: 0; /* 移除最后一个子容器的底部间距 */
}

.content {
  padding-left: 20px;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 使内容在水平方向上均匀分布 */
  width: 100%;
}


.right1-enter-button {
  width: 70upx;
  height: 70upx;
  border-radius: 50%;
  background-color: #ef955d;
  color: white;
  display: flex;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  margin-right: 3px;
}

.right2-enter-button {
  width: 70upx;
  height: 70upx;
  border-radius: 50%;
  background-color: #0cede2;
  color: white;
  display: flex;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: center; /* 水平居中对齐 */
  margin-right: 3px;
}

.c6 {
  height: 600upx;
  overflow-y: auto; /* 显示垂直滚动条 */
  -webkit-overflow-scrolling: touch; /* 使滚动更平滑（适用于 iOS） */
}

.c7 {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 35upx;
  padding-right: 35upx;
  margin-top: 50upx;
  border-bottom: 1px solid #f0f0f0; /* 添加分隔线 */
}

.c8 {
  height: 110upx;
  display: flex;
  flex-direction: column;
  width: 76%;
  padding-right: 30upx;
}

.c9 {
  font-size: 16px;
  font-weight: 500;
  height: 90upx;
  line-height: 1.5; /* 使文本垂直居中 */
}

.d1 {
  font-size: 20upx;
  color: #999;
  height: 20upx;
  line-height: 1.5; /* 使文本垂直居中 */
}

.d2 {
  height: 110upx;
  width: 110upx;
}

.news {
  width: 90%;
  font-size: 36upx;
  font-weight:bold;
  padding: 10upx;
  margin-left: 15px;
  margin-top: 10px;
}

.resources {
  width: 20%;
  font-size: 36upx;
  font-weight:bold;
  padding: 10upx;
  margin-left: 15px;
}
</style>
